<template>
	<div class="echarLeft" id="chart1" style="height: 200px"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
	type EChartsOption = echarts.EChartsOption;

	var chartDom = document.getElementById("chart1")!;
	var myChart = echarts.init(chartDom);
	var option: EChartsOption;

	option = {
		grid: {
			top: "30%", // 调整为适当的数值
			bottom: "12%", // 调整为适当的数值
		},
		xAxis: {
			type: "category",
			data: ["1月", "2月", "3月", "4月", "5月", "6月"],
			splitLine: {
				show: false, // 隐藏 x 轴上的横线
			},
		},
		yAxis: {
			type: "value",
			splitLine: {
				show: false, // 隐藏 x 轴上的横线
			},
		},
		tooltip: {
			// 添加tooltip
			trigger: "axis", // 触发类型为坐标轴触发
			axisPointer: {
				// 坐标轴指示器配置项
				type: "shadow", // 指示器类型为阴影指示器
				label: {
					// 坐标轴指示器的文本标签配置项
					show: false,
				},
				shadowStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "rgba(41, 36, 20, 0.8)" }, // 添加透明度，修改颜色为 rgba 格式
						{ offset: 1, color: "rgba(150, 114, 20, 0.8)" },
					]),
				},
				lineStyle: {
					color: "#ffbc0f", // 设置高亮颜色为黄色
				},
			},
			backgroundColor: "rgba(0, 0, 0, 0.7)", // 背景颜色
			padding: 10, // 内边距
			textStyle: {
				color: "#ffbc0f", // 文字颜色
				fontSize: 14, // 文字大小
			},
			borderColor: "#ffbc0f",
			formatter: function (params: any) {
				var value = params[0].value;

				var content = '<div class="tooltip-container">';
				content += '<div class="tooltip-value">' + value + "</div>";
				content += "</div>";

				return content;
			},
		},
		series: [
			{
				data: [150, 230, 224, 218, 135, 147, 260],
				type: "line",
				lineStyle: {
					color: "#ffbc0f", // 自定义线条颜色，例如蓝色
				},
				itemStyle: {
					color: "#050b15", // 自定义点的颜色，例如红色
					borderColor: "#ffbc0f", // 外部空心圆的边框颜色
					borderWidth: 1,
				},
				symbol: "circle",
				symbolSize: 12,
				emphasis: {
					// 设置高亮效果
					itemStyle: {
						color: "#ffbc0f", // 高亮圆点颜色
					},
					lineStyle: {
						color: "#ffbc0f", // 高亮线条颜色
					},
				},
			},
		],
	};
    option && myChart.setOption(option);
})
</script>

<style scoped></style>
